<template>
    <div class="rate-box">
        <div class="rate" @click="changeSource(0)">
            <div class="box" @click.stop>
                <input
                    type="radio"
                    :disabled=" readOnly "
                    value="5"
                    id="rate1"
                    :checked="value>4"
                    @change="changeSource(5)"
                />
                <label for="rate1"></label>
                <input
                    type="radio"
                    :disabled=" readOnly "
                    value="4"
                    id="rate2"
                    :checked="value>3&&value<=4"
                    @change="changeSource(4)"
                />
                <label for="rate2"></label>
                <input
                    type="radio"
                    :disabled=" readOnly "
                    value="3"
                    id="rate3"
                    :checked="value>2&&value<=3"
                    @change="changeSource(3)"
                />
                <label for="rate3"></label>
                <input
                    type="radio"
                    :disabled=" readOnly "
                    value="2"
                    id="rate4"
                    :checked="value>1&&value<=2"
                    @change="changeSource(2)"
                />
                <label for="rate4"></label>
                <input
                    type="radio"
                    :disabled=" readOnly "
                    value="1"
                    id="rate5"
                    :checked="value>0&&value<=1"
                    @change="changeSource(1)"
                />
                <label for="rate5"></label>
            </div>
            <span class="source">{{ value | addZero }}</span>
        </div>
    </div>
</template>
<script>
export default {
    model: {
        prop: "value",
        event: "change"
    },
    props: {
        readOnly: {
            default: true,
            type: Boolean
        },
        value: Number
    },
    filters:{
        addZero(value){
            return value.toFixed(1);
        }
    },
    methods:{
        changeSource(n){
            // console.log(n);
           this.$emit('change', n)
        }
    }
};
</script>

<style lang="less" scoped>
.rate-box {
    .rate {
        display: inline-block;
        padding: 0px 12px;
    }
    .box {
        display: flex;
        flex-flow: row-reverse;
        float: left;
        input[type="radio"] {
            display: none;
        }
        input[type="radio"]:checked ~ label {
            background-image: url("../assets/star-open.png");
        }
        label {
            display: inline-block;
            background-image: url("../assets/star-close.png");
            background-repeat: no-repeat;
            background-size: 90% 90%;
        }
    }
    .source {
        float: left;
    }
}
</style>